<template>
  <div>
    <div class="items-wrapper">
      <van-cell-group>
        <van-field v-model="name" placeholder="输入您的姓名"></van-field>
        <van-field v-model="phone" placeholder="输入您的电话号码"></van-field>
        <van-cell :value="catalog ? catalog: '选择您反馈问题的类型'" @click="showAction()" isLink/>
        <van-field v-model="text" type="textarea" placeholder="输入你反馈的内容" rows="5">
        <span class="van-field__counter">{{ counter }}</span>
        </van-field>
      </van-cell-group>
    </div>
    <van-actionsheet v-model="actionShow" :actions="actions" />
    <div class="button-wrapper">
      <button catalog="button" @click="submit" class="btn btn-yellow">提交反馈</button>
    </div>
    <div id="footer-obj" :class="['footer-logo-wrapper', hideFooter ? 'hide' : '']">
      <span>书画点评网 2018 版权所有</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

export default {
  name: 'Feedback',
  data () {
    return {
      name: '',
      phone: '',
      text: '',
      catalog: '',
      actionShow: false,
      pageHeight: document.body.clientHeight,
      hideFooter: false,
      actions: [
        {
          name: '程序错误',
          callback: this.chooseType
        },
        {
          name: '认证失败',
          callback: this.chooseType
        },
        {
          name: '提现问题',
          callback: this.chooseType
        },
        {
          name: '其他问题',
          callback: this.chooseType
        },
        {
          name: '取消',
          callback: this.cancelAction
        }
      ]
    }
  },
  created () {
    this.setFooter()
  },
  computed: {
    counter: function() {
      var textCount = this.text.length
      return textCount + '/140'
    }
  },
  methods: {
    showAction() {
      this.actionShow = !this.actionShow
    },
    chooseType(item) {
      this.catalog = item.name
      this.actionShow = false
    },
    cancelAction() {
      this.actionShow = false
    },
    submit() {
      if (!this.name) {
        return this.$toast.fail('请输入您的姓名')
      }
      if (!this.phone) {
        return this.$toast.fail('请输入您的手机号')
      }
      if (!this.text) {
        return this.$toast.fail('反馈内容不能为空')
      }
      var params = {
        'text': this.text,
        'mobile': this.phone,
      }
      this.$toast.loading({ duration: 0 })
      var that = this
      // 调用登陆接口
      this.axios.post('/system/feedback/', qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        if (res.status >= 200 && res.status < 300) {
          that.$toast.success('反馈成功')
          that.$router.go(-1)
        } else {
          return that.$toast.fail(res.msg)
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        that.$toast.fail('请求出错')
      })
    },
    setFooter: function() {
      var that = this
      window.onresize = function() {
        if (that.pageHeight > document.body.clientHeight) {
          that.hideFooter = true
        } else {
          that.hideFooter = false
        }
      }
    }
  }
}

</script>

<style lang="css" scoped>
  .van-cell__value {
    font-size: 14px;
  }
  
</style>
